<template>
	<view class="bg-white">
		<nav-custom></nav-custom>
		<button @click="handleCity('重庆市')">修改城市</button>
		<scroll-view :scroll-into-view="topItem" scroll-with-animation class="scroll-cont" scroll-y="true" @scroll="handleScroll">
			<view>
				<view id="top-item"></view>
				<swiper :indicator-dots="true">
					<swiper-item v-for="(item,index) in banner">
						<view class="swiper-item">
							<image :src="item.poster" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
				<!-- #ifdef MP-WEIXIN -->
				<view class="flex justify-around">
					<view class="padding margin-tb" v-for="item in 4">
						宫格结构
					</view>
				</view>
				<!-- #endif -->
				<home-title :more="false"></home-title>
				<scroll-view scroll-x="true" >
					<view class="flex recommend">
						<image src="../../static/img/4078f0688fd4a7d9 (1).jpg" mode="heightFix"></image>
						<image src="../../static/img/89591b09234c0f70 (1).jpg" mode="heightFix"></image>
						<image src="../../static/img/182e63e229f79da3 (1).jpg" mode="heightFix"></image>
					</view>
				</scroll-view>
				<home-title ctit="法式经典" etit="French Classic"></home-title>
				<image class="title-poster" src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/002d8ec99b74dccd/15c31d4729a3eecc.jpg" mode="widthFix"></image>
				<view class="flex padding-xs flex-wrap justify-between">
					<cake-item v-for="item in cakelist" :gdata="item"></cake-item>
				</view>
			</view>
		</scroll-view>
		<view class="back-top" v-if="isShow" @click="handleBack">
			<text class="iconfont icon-tubiao_fanhuidingbu"></text>
		</view>
	</view>
</template>

<script>
	import {bannerGet,cakeGet} from '../../api/cake.js'
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				banner:[],
				cakelist:[],
				isShow:false,
				topItem:''
			};
		},
		onLoad() {
			bannerGet().then(res=>{
				this.banner = res.data.results
			})
			cakeGet().then(res=>{
				this.cakelist = res.data.results
			})
		},
		methods: {
			handleScroll(ev) {
				// console.log(ev);
				let {scrollTop} = ev.detail
				this.isShow = scrollTop>800
				if(scrollTop>800){
					this.topItem = ''
				}
			},
			handleBack(){
				this.topItem = 'top-item'
			},
			...mapMutations({
				handleCity:'location/cityChangeMut'
			})
		},
	}
</script>

<style lang="scss">
page{
	padding-top: 100upx;
}
swiper{
	height: 800upx;
	swiper-item,image{
		height: 800upx;
		
	}
	
}
.recommend{
	image{
		height: 290upx;
		flex-shrink: 0;
	}
}
.title-poster{
	width: 100%;
}
.scroll-cont{
	height: 100vh;
}
.back-top{
	width: 100upx;
	height: 100upx;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 0 20upx 2upx rgba(0,0,0,0.2);
	position: fixed;
	bottom: 120upx;
	right: 20upx;
	text-align: center;
	line-height: 100upx;
}
</style>
